<template>
  <div class="app-container">
    <el-form :model="actSpecial" :rules="rules" ref="actSpecial" label-width="130px">
      <el-row :gutter="24">
        <el-divider content-position="left"><legend class="divider-line">新增专题活动</legend></el-divider>
        <el-col :span="20">
          <el-form-item label="活动名称" prop="name">
            <el-input v-model="actSpecial.name" maxlength="20"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="活动分类" prop="type">
            <el-select class="toolbar-lable-right" v-model="actSpecial.type" placeholder="请选择">
              <el-option
                v-for="item in actSpecialTypeList"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="排序" prop="sortNum">
            <el-input-number v-model="actSpecial.sortNum" :min="0" :max="99" :precision="0"></el-input-number>
            <span class="form-word-hint">序号越大越靠前显示</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="最低价格" prop="lowPrice">
            <el-input-number v-model="actSpecial.lowPrice" :min="0" :max="99" :precision="0"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="最低折扣" prop="lowDiscount">
            <el-input-number v-model="actSpecial.lowDiscount" :min="0" :max="10" :precision="2"></el-input-number>
            <span class="form-word-hint">0到10之间的任意数值，可保留2位小数</span>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="活动日期" prop="yxkjdate">
             <el-date-picker
                  v-model="value1"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  @change="selectTime"
                  >
                </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="应用场景" prop="channel">
            <el-radio-group v-model="actSpecial.channel">
              <el-radio v-for="item in channel" :key="item.value" :label="item.value">{{item.name}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="是否推荐" prop="isBest">
            <el-radio-group v-model="actSpecial.isBest">
              <el-radio v-for="item in yesNo" :key="item.value" :label="item.value">{{item.name}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24" style="margin-bottom: 60px;">
        <el-divider content-position="left"><legend class="divider-line">专题活动相关图片</legend></el-divider>
        <el-col :span="16">
          <el-form-item label="专题logo图片" prop="specialLogo">
            <el-upload
                    class="avatar-uploader"
                    :action="$imageUrl+'/uploadFileImage'"
                    :show-file-list="false"
                    :on-success="handleMasterSuccess"
                    :before-upload="beforeAvatarUpload">
              <img v-if="actSpecial.specialLogo" :src="$imagePath+actSpecial.specialLogo" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <span class="form-word-hint">图片不能超过500KB，长宽比例为2:1效果最佳</span>
           </el-form-item>
        </el-col>

        <el-col :span="16">
          <el-form-item label="PC列表图片" prop="specialImage">
            <el-upload
                    class="avatar-uploader"
                    :action="$imageUrl+'/uploadFileImage'"
                    :show-file-list="false"
                    :on-success="handleMasterSuccessSpecialImage"
                    :before-upload="beforeAvatarUpload">
              <img v-if="actSpecial.specialImage" :src="$imagePath+actSpecial.specialImage" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <span class="form-word-hint">图片不能超过500KB，建议图片宽度：612px；高度：220px</span>
           </el-form-item>
        </el-col>

        <el-col :span="16">
          <el-form-item label="mobile列表图" prop="specialImageMobile">
            <el-upload
                    class="avatar-uploader"
                    :action="$imageUrl+'/uploadFileImage'"
                    :show-file-list="false"
                    :on-success="handleMasterSuccessSpecialImageMobile"
                    :before-upload="beforeAvatarUpload">
              <img v-if="actSpecial.specialImageMobile" :src="$imagePath+actSpecial.specialImageMobile" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <span class="form-word-hint">图片不能超过500KB，建议图片宽度：750px；高度：360px</span>
           </el-form-item>
        </el-col>

        <el-col :span="16">
          <el-form-item label="PC首页图片" prop="pcImage">
            <el-upload
                    class="avatar-uploader"
                    :action="$imageUrl+'/uploadFileImage'"
                    :show-file-list="false"
                    :on-success="handleMasterSuccessPcImage"
                    :before-upload="beforeAvatarUpload">
              <img v-if="actSpecial.pcImage" :src="$imagePath+actSpecial.pcImage" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <span class="form-word-hint">图片不能超过500KB，建议图片宽度：980px；高度：600px</span>
           </el-form-item>
        </el-col>

        <el-col :span="16">
          <el-form-item label="mobile首页图片" prop="mobileImage">
            <el-upload
                    class="avatar-uploader"
                    :action="$imageUrl+'/uploadFileImage'"
                    :show-file-list="false"
                    :on-success="handleMasterSuccessMobileImage"
                    :before-upload="beforeAvatarUpload">
              <img v-if="actSpecial.mobileImage" :src="$imagePath+actSpecial.mobileImage" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <span class="form-word-hint">图片不能超过500KB，建议图片宽度：750px；高度：360px</span>
           </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <div class="fixed-bottom-20">
          <el-button type="primary" @click="submitForm('actSpecial')">立即提交</el-button>
          <el-button type="success" @click="back">返回</el-button>
          <el-button @click="resetForm('actSpecial')">重置</el-button>
        </div>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { getCodeManager,codeToArray,uploadFileImage } from "@/api/all"
import { addActSpecial,createActSpecial } from "@/api/promotion"
import { Message } from 'element-ui'
export default {
  name: "mIndexBannerAdd",
  data() {
    return {
      actSpecialTypeList:[],
      channel:[],
      yesNo:[],
      value1:[],
      actSpecial: {
        isBest: "0",
        channel: '1',
        specialLogo: "",
        specialImage: "",
        specialImageMobile: "",
        pcImage: "",
        mobileImage: "",
        yxkjdate:""
      },
      rules: {
        name: [{ required: true, message: "请输入标题", trigger: "blur" }],
        type: [{ required: true, message: "请选择分类", trigger: "change" }],
        sortNum: [{ required: true, message: "请输入排序", trigger: "blur" }],
        lowPrice: [{ required: true, message: "请输入最低价格", trigger: "blur" }],
        lowDiscount: [{ required: true, message: "请输入最低折扣", trigger: "blur" }],
        isBest: [{ required: true, message: "请选择是否推荐", trigger: "change" }],
        channel: [{ required: true, message: "请选择渠道", trigger: "change" }],
        specialLogo: [{ required: true, message: "请上传图片", trigger: "change" }],
        specialImage: [{ required: true, message: "请上传图片", trigger: "change" }],
        specialImageMobile: [{ required: true, message: "请上传图片", trigger: "change" }],
        pcImage: [{ required: true, message: "请上传图片", trigger: "change" }],
        mobileImage: [{ required: true, message: "请上传图片", trigger: "change" }],
        yxkjdate: [{ required: true, message: "请选择展示时间", trigger: "change" }]
      }
    };
  },
  created() {
    getCodeManager('ACT_SPECIAL_STATUS,CHANNEL,SPECIAL_TYPE_STATE,YES_NO', () => {
      this.channel = codeToArray('CHANNEL');
      this.yesNo = codeToArray('YES_NO');
    })
    addActSpecial().then(response => {
      this.actSpecialTypeList=[
        ...response.data.data.actSpecialTypeList.map((item)=>{return  {
          name:item.name,
          value:item.id
        }})
      ]
    })
  },
  methods: {
    handleMasterSuccess(res, file) {
      const formData = new FormData()
      formData.append('type', 'promotion')
      formData.append('imageFile', file.raw)
      uploadFileImage(formData).then(result => {
        if(result.data.success) {
          this.actSpecial.specialLogo = result.data.data;
        }
      })
    },
    handleMasterSuccessSpecialImage(res, file) {
      const formData = new FormData()
      formData.append('type', 'promotion')
      formData.append('imageFile', file.raw)
      uploadFileImage(formData).then(result => {
        if(result.data.success) {
          this.actSpecial.specialImage = result.data.data;
        }
      })
    },
    handleMasterSuccessSpecialImageMobile(res, file) {
      const formData = new FormData()
      formData.append('type', 'promotion')
      formData.append('imageFile', file.raw)
      uploadFileImage(formData).then(result => {
        if(result.data.success) {
          this.actSpecial.specialImageMobile = result.data.data;
        }
      })
    },
    handleMasterSuccessPcImage(res, file) {
      const formData = new FormData()
      formData.append('type', 'promotion')
      formData.append('imageFile', file.raw)
      uploadFileImage(formData).then(result => {
        if(result.data.success) {
          this.actSpecial.pcImage = result.data.data;
        }
      })
    },
    handleMasterSuccessMobileImage(res, file) {
      const formData = new FormData()
      formData.append('type', 'promotion')
      formData.append('imageFile', file.raw)
      uploadFileImage(formData).then(result => {
        if(result.data.success) {
          this.actSpecial.mobileImage = result.data.data;
        }
      })
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 0.5;
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG和PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 500K!');
      }
      return isJPG && isLt2M;
    },
    selectTime(){
      this.actSpecial.yxkjdate = this.value1[0] + " - " + this.value1[1];
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          createActSpecial(this.actSpecial).then(res => {
            if(!res.data.success) {
              Message.error(res.data.message);
              return;
            }
            Message.success('操作成功')
            this.resetForm('actSpecial')
            history.back()
          })
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    back() {
      history.back();
    }
  }

}
</script>
<style scoped>
  /deep/ .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  /deep/ .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  /deep/ [class*=el-col-] {
    float: none;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    display: block;
    height: 150px;
  }
</style>
